<template>
  <view class="container page" style="overflow-x: hidden;">
	  
	<view style="background-color: white; width: 100%;height: var(--status-bar-height);">
	</view>
	<uni-nav-bar title="动态广场" color="#000" right-icon="plus" left-icon="left" @clickLeft="navBack()" @clickRight="navTo()"/>
	
    <view class="parent-container">
	<view class="flex-col flex-auto group_2 w_full">
      <view class="flex-col list space-y-24 w_full">
        <view class="flex-col section" v-for="(item, index) in list" :key="index">
		<view class="group_3" v-for="(shoptalk, shoptalkIndex) in item.shoptalks" :key="shoptalkIndex">
          <view class="flex-col align-center">
			
			  <view class="group_3">
			   <image class="shrink-0 image_7" src="../../static/images/5fa07f44a029a9a4acc7a9aaa7a4c078.png" />
			   <text class="font_3">{{ shoptalk.nickname_user}}</text>   
			  </view>
			  <view class="flex-col">
			   <text class="talk_time">{{ dateFormat(shoptalk.talk_time) }}</text>
			  </view>
			  
			  <view class="flex-col">
			    <text class="talk_user">{{ shoptalk.talk_user}}</text>
			  </view>
			  <view class="images">
			    <image class="showimage" :src='shoptalk.image1' />
			    <image class="showimage" :src='shoptalk.image2' />
			    <image class="showimage" :src='shoptalk.image3' />
			    <image class="showimage" :src='shoptalk.image4' />
			    <image class="showimage" :src='shoptalk.image5' />
			    <image class="showimage" :src='shoptalk.image6' />
			  </view>
			
			  <view class="img">
				<image class="img-1" :src="isLiked ? '../../static/images/like.png' : '../../static/images/like1.png'" @click="toggleLike(item)"></image>
				<span class="count">{{ shoptalk.number_like }}</span>
				<image class="img-1" :src="shoucang ? '../../static/images/shoucang.png' : '../../static/images/shoucang1.png'" @click="orshoucang(item.talk_number)"></image>
				<span class="count">{{shoptalk.talk_collection}}</span>
				<image class="img-1" src="../../static/images/review.png"></image>
			   </view>
          </view>
		</view>
        </view>
      </view>
    </view>
	</view>
	
  </view>
</template>

<script>
  import uniList from "@/uni_modules/uni-list/components/uni-list/uni-list.vue"
  import uniListItem from "@/uni_modules/uni-list/components/uni-list-item/uni-list-item.vue"
  import { _getbyascription} from '@/service/news.js'
  import { _talkaddlike} from '@/service/news.js'
  import { _talkminslike} from '@/service/news.js'
  import { _talkaddcollection} from '@/service/news.js'
  import { _talkminscollection} from '@/service/news.js'
  export default {
    components: {},
    data() {
      return {
        list:[],
		talk_number:'',
		like:true,
		shoucang:true,
		isLiked:true,
		likedItems:[],
		talk_number:'',
		// image:[]
      };
    },
	onLoad() {
		this.getallusertalk()
		console.log("123")
	},
	
    methods: {
		handleWebSocketMessage(message) {
		      console.log('Received WebSocket message in SomeComponent:', message)
		      // 在这里处理接收到的消息
		    },
		navTo(){
			uni.navigateTo({
				url:'/pages/question/question'
			})
		},
		navBack(){
			uni.navigateBack(1)
		},
		dateFormat(registertime) {
		    let date = new Date(registertime);
		    let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			let hours = date.getHours();
			let minutes = date.getMinutes();
			let seconds = date.getSeconds();
		    return year + "-" + month + "-" + day;
		},

		async getallusertalk(){
			console.log("123")
			let res = await _getbyascription()
			this.list = res.data
			console.log(this.list);
			
		},
		
		toggleLike(item) {
		  console.log(item)
		  this.talk_number=item.talk_number
		  this.$set(item, 'isLiked', !item.isLiked); // 切换喜欢状态
		  if (item.isLiked) {
			item.number_like += 1; // 喜欢时加1
			this.saveLike()
		  } else {
			item.number_like -= 1; // 取消喜欢时减1
			this.cancelLike()
		  }
		},
		orshoucang(item) {
		  this.talk_number=item.talk_number
		  console.log(this.talk_number)
		  this.$set(item, 'shoucang', !item.shoucang); // 切换收藏状态
		  if (item.shoucang) {
			item.talk_collection += 1; 
			this.savecollect()
		  } else {
			item.talk_collection -= 1;
			this.cancelcollect()
		  }
		},
		
		async saveLike() {
		  let data={
			talk_number:this.talk_number
		  }
		  let res=await _talkaddlike(data)
		  console.log(res.data)
		  console.log(this.talk_number)
		},
		async cancelLike() {
		  let data={
		  	talk_number:this.talk_number
		  }
		  let res=await _talkminslike(data)
		  console.log(res.data)
		},
		
		async savecollect() {
		  let data={
			talk_number:this.talk_number
		  }
		  let res=await _talkaddcollection(data)
		  console.log(res.data)
		  console.log(this.talk_number)
		},
		async cancelcollect() {
		  let data={
		  	talk_number:this.talk_number
		  }
		  let res=await _talkminscollection(data)
		  console.log(res.data)
		}
	},
  };
</script>

<style scoped>
.page {
  flex: 1;
  overflow-y: auto;
  background-color: #f0f0f0;
}
.parent-container {
  max-width: 800px;
  margin: 0 auto; /* 将元素居中对齐 */
}

.uni-nav-bar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.list {
  padding-top: var(--status-bar-height);
}

.section {
  background-color: #ffffff;
  margin-bottom: 20px;
  padding: 15px;
  display: flex;
  flex-direction:column;/*表示子元素垂直排列*/
  flex:1;
}

.group_3 {
  display: flex;
  /* justify-content: space-between; */
}

.font_3 {
  margin-left: 30rpx;
  font-size: 14px;
  color: #333333;
}

.font_4 {
  font-size: 16px;
  color: #333333;
}
.font_5 {
  font-size: 16px;
  color: #333333;
  margin-right: 10rpx;
}

.img {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: -30px;
}

.img-1 {
  width: 20px;
  height: 20px;
}
.image_7 {
  width: 40px;
  height: 40px;
  border-radius: 50%;

}
.count {
  margin-left: 5px;
  font-size: 12px;
  color: #666666;
}

.list1 {
  background-color: #ffffff;
  margin-top: 20px;
}

.uni-list-chat {
  padding: 15px;
}

.img-1 {
  width: 20px;
  height: 20px;
}
.talk_user{
	margin-top: 30rpx;
	margin-left: 20rpx;
	margin-bottom: 50rpx;
}

.showimage{
	width: 50px; 
	height: 50px;
	margin-left: 40rpx;
}

.group_3, .talk_user, .images {
  width: 100%;
  display: flex; 
  align-items: center; 
}

.images {
  flex-wrap: wrap; 
}

.showimage {
  width: 25%; 
  box-sizing: border-box;
  padding: 5px;
}
.group_3,.talk_user,.images,.talk_time,.img{
  height: auto;
}
.talk_time{
  margin-left: 90rpx;
  font-size: 10rpx;
  color: #a5a5a5;
}
</style>